Monorepo Frontend : Gestion d'Espace de Travail avec Lerna et Nx

Dans le paysage en constante évolution du développement frontend, la gestion de projets vastes et complexes peut représenter un défi majeur. Les configurations traditionnelles multi-repo, bien qu'offrant une isolation, peuvent entraîner une duplication de code, des problèmes de gestion des dépendances et des outils incohérents. C'est là que l'architecture monorepo prend tout son sens. Un monorepo est un dépôt unique contenant plusieurs projets, souvent liés, qui sont construits et versionnés ensemble. Cette approche offre de nombreux avantages, mais la gestion efficace d'un monorepo nécessite des outils spécialisés. Cet article explore deux solutions populaires : Lerna et Nx.

Qu'est-ce qu'un Monorepo ?

Un monorepo est un dépôt de système de contrôle de version qui contient le code de nombreux projets. Ces projets peuvent être liés ou complètement indépendants. L'essentiel est qu'ils partagent le même dépôt. Des entreprises comme Google, Facebook, Microsoft et Uber ont adopté avec succès les monorepos pour gérer leurs bases de code massives. Pensez à Google qui stocke la quasi-totalité de son code, y compris Android, Chrome et Gmail, dans un seul dépôt.

Avantages d'un Monorepo

• Partage et Réutilisation de Code : Partagez facilement du code entre les projets sans flux de travail complexes d'empaquetage et de publication. Imaginez une bibliothèque de systèmes de conception qui peut être intégrée de manière transparente dans plusieurs applications au sein du même dépôt.
• Gestion Simplifiée des Dépendances : Gérez les dépendances en un seul endroit, garantissant la cohérence entre tous les projets. La mise à jour d'une dépendance d'une bibliothèque partagée met automatiquement à jour tous les projets qui en dépendent.
• Changements Atomiques : Effectuez des changements qui couvrent plusieurs projets en une seule validation, garantissant la cohérence et simplifiant les tests. Par exemple, un refactoring qui affecte à la fois le frontend et le backend peut être effectué de manière atomique.
• Collaboration Améliorée : Les équipes peuvent facilement collaborer sur différents projets au sein du même dépôt, favorisant le partage des connaissances et le développement interfonctionnel. Les développeurs peuvent facilement parcourir et comprendre le code de différentes équipes.
• Outils et Pratiques Cohérents : Appliquez des normes de codage, des règles de linting et des processus de build cohérents sur tous les projets. Cela améliore la qualité et la maintenabilité du code.
• Refactoring Simplifié : Les projets de refactoring à grande échelle sont simplifiés car tout le code connexe se trouve dans le même dépôt. Des outils de refactoring automatisés peuvent être utilisés sur l'ensemble de la base de code.

Défis d'un Monorepo

• Taille du Dépôt : Les monorepos peuvent devenir très volumineux, ralentissant potentiellement les opérations de clonage et d'indexation. Des outils comme `git sparse-checkout` et `partial clone` peuvent aider à atténuer ce problème.
• Temps de Build : La construction de l'ensemble du monorepo peut être longue, surtout pour les projets importants. Des outils comme Lerna et Nx offrent des processus de build optimisés pour résoudre ce problème.
• Contrôle d'Accès : Restreindre l'accès à des parties spécifiques du monorepo peut être complexe. Une planification et une mise en œuvre minutieuses des mécanismes de contrôle d'accès sont nécessaires.
• Complexité des Outils : La mise en place et la gestion d'un monorepo nécessitent des outils et des connaissances spécialisés. La courbe d'apprentissage peut être raide au début.

Lerna : Gestion des Projets JavaScript dans un Monorepo

Lerna est un outil populaire pour gérer les projets JavaScript dans un monorepo. Il optimise le flux de travail autour de la gestion des dépôts multi-packages avec Git et npm. Il est particulièrement bien adapté aux projets qui utilisent npm ou Yarn pour la gestion des dépendances.

Fonctionnalités Clés de Lerna

• Gestion des Versions : Lerna peut versionner et publier automatiquement des packages en fonction des changements apportés depuis la dernière version. Il utilise des commits conventionnels pour déterminer le numéro de version suivant.
• Gestion des Dépendances : Lerna gère les dépendances inter-packages, garantissant que les packages au sein du monorepo peuvent dépendre les uns des autres. Il utilise le symlinking pour créer des dépendances locales.
• Exécution des Tâches : Lerna peut exécuter des commandes sur plusieurs packages en parallèle, accélérant les processus de build et de test. Il prend en charge l'exécution de scripts définis dans `package.json`.
• Détection des Changements : Lerna peut détecter quels packages ont changé depuis la dernière version, permettant des builds et des déploiements ciblés.

Exemple d'Utilisation de Lerna

Illustrons l'utilisation de Lerna avec un exemple simplifié. Supposons que nous ayons un monorepo avec deux packages : `package-a` et `package-b`. `package-b` dépend de `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Initialiser Lerna :

lerna init

Ceci crée `lerna.json` et met à jour le `package.json` racine. Le fichier `lerna.json` configure le comportement de Lerna.

2. Installer les Dépendances :

npm install
# ou
yarn install

Ceci installe les dépendances de tous les packages du monorepo, en se basant sur les fichiers `package.json` de chaque package.

3. Exécuter une Commande sur les Packages :

lerna run test

Ceci exécute le script `test` défini dans les fichiers `package.json` de tous les packages qui en disposent.

4. Publier les Packages :

lerna publish

Cette commande analyse l'historique des commits, détermine quels packages ont changé, met à jour leurs versions en fonction des commits conventionnels et les publie sur npm (ou votre registre choisi).

Configuration de Lerna

Le fichier `lerna.json` est le cœur de la configuration de Lerna. Il vous permet de personnaliser le comportement de Lerna, tel que :

• `packages` : Spécifie l'emplacement des packages dans le monorepo. Souvent défini sur `["packages/*"]`.
• `version` : Spécifie la stratégie de versioning. Peut être `independent` (chaque package a sa propre version) ou une version fixe.
• `command` : Permet de configurer les options pour des commandes Lerna spécifiques, telles que `publish` et `run`.

Exemple de `lerna.json` :

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx : Système de Build Intelligent, Rapide et Extensible

Nx est un système de build puissant qui offre des fonctionnalités avancées pour la gestion des monorepos. Il se concentre sur les builds incrémentiels, la mise en cache des calculs et l'orchestration des tâches pour améliorer considérablement les temps de build et la productivité des développeurs. Alors que Lerna se concentre principalement sur la gestion des packages, Nx offre une approche plus complète pour gérer le flux de travail complet du monorepo, y compris la génération de code, le linting, les tests et le déploiement.

Fonctionnalités Clés de Nx

• Builds Incrémentiels : Nx analyse le graphe de dépendances de vos projets et ne reconstruit que les projets qui ont changé depuis le dernier build. Cela réduit considérablement les temps de build.
• Mise en Cache des Calculs : Nx met en cache les résultats des tâches, telles que les builds et les tests, afin qu'ils puissent être réutilisés si les entrées n'ont pas changé. Cela accélère encore les cycles de développement.
• Orchestration des Tâches : Nx fournit un système d'orchestration de tâches puissant qui vous permet de définir des pipelines de build complexes et de les exécuter efficacement.
• Génération de Code : Nx fournit des outils de génération de code qui peuvent vous aider à créer rapidement de nouveaux projets, composants et modules, en suivant les meilleures pratiques et les normes cohérentes.
• Écosystème de Plugins : Nx dispose d'un riche écosystème de plugins qui prend en charge diverses technologies et frameworks, tels que React, Angular, Node.js, NestJS, et plus encore.
• Visualisation du Graphe de Dépendances : Nx peut visualiser le graphe de dépendances de votre monorepo, vous aidant à comprendre les relations entre les projets et à identifier les problèmes potentiels.
• Commandes Affectées : Nx fournit des commandes pour exécuter des tâches uniquement sur les projets affectés par un changement spécifique. Cela vous permet de concentrer vos efforts sur les domaines qui nécessitent une attention particulière.

Exemple d'Utilisation de Nx

Illustrons l'utilisation de Nx avec un exemple simplifié. Nous allons créer un monorepo avec une application React et une bibliothèque Node.js.

1. Installer Nx CLI Globalement :

npm install -g create-nx-workspace

2. Créer un Nouvel Espace de Travail Nx :

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Ceci crée un nouvel espace de travail Nx avec une application React. L'option `--preset=react` indique à Nx d'initialiser l'espace de travail avec des configurations spécifiques à React.

3. Générer une Bibliothèque :

nx generate @nrwl/node:library my-library

Ceci génère une nouvelle bibliothèque Node.js appelée `my-library`. Nx configure automatiquement la bibliothèque et ses dépendances.

4. Construire l'Application :

nx build my-app

Ceci construit l'application React. Nx analyse le graphe de dépendances et ne reconstruit que les fichiers nécessaires.

5. Exécuter les Tests :

nx test my-app

Ceci exécute les tests unitaires de l'application React. Nx met en cache les résultats des tests pour accélérer les exécutions de tests ultérieures.

6. Afficher le Graphe de Dépendances :

nx graph

Ceci ouvre une interface web qui visualise le graphe de dépendances du monorepo.

Configuration de Nx

Nx est configuré via le fichier `nx.json`, situé à la racine de l'espace de travail. Ce fichier définit les projets de l'espace de travail, leurs dépendances et les tâches qui peuvent être exécutées sur eux.

Les options de configuration clés dans `nx.json` incluent :

• `projects` : Définit les projets de l'espace de travail et leur configuration, tels que leur répertoire racine et leurs cibles de build.
• `tasksRunnerOptions` : Configure le runner de tâches, responsable de l'exécution des tâches et de la mise en cache de leurs résultats.
• `affected` : Configure la manière dont Nx détermine les projets affectés par un changement.

Exemple de `nx.json` :

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx : Lequel Choisir ?

Lerna et Nx sont tous deux d'excellents outils pour gérer les monorepos frontend, mais ils répondent à des besoins légèrement différents. Voici une comparaison pour vous aider à choisir le bon pour votre projet :

Fonctionnalité	Lerna	Nx
Focus	Gestion des Packages	Système de Build et Orchestration des Tâches
Builds Incrémentiels	Limité (nécessite des outils externes)	Intégré et hautement optimisé
Mise en Cache des Calculs	Non	Oui
Génération de Code	Non	Oui
Écosystème de Plugins	Limité	Vaste
Courbe d'Apprentissage	Plus faible	Plus élevée
Complexité	Plus simple	Plus complexe
Cas d'Utilisation	Projets principalement axés sur la gestion et la publication de packages npm.	Projets vastes et complexes nécessitant des temps de build optimisés, de la génération de code et un système de build complet.

Choisissez Lerna si :

• Vous avez principalement besoin de gérer et de publier des packages npm.
• Votre projet est de taille petite à moyenne.
• Vous préférez un outil plus simple avec une courbe d'apprentissage plus faible.
• Vous êtes déjà familiarisé avec npm et Yarn.

Choisissez Nx si :

• Vous avez besoin de temps de build optimisés et de builds incrémentiels.
• Vous souhaitez des capacités de génération de code.
• Vous avez besoin d'un système de build complet avec orchestration des tâches.
• Votre projet est vaste et complexe.
• Vous êtes prêt à investir du temps pour apprendre un outil plus puissant.

Pouvez-vous utiliser Lerna avec Nx ?

Oui, Lerna et Nx peuvent être utilisés ensemble. Cette combinaison vous permet de bénéficier des capacités de gestion de packages de Lerna tout en profitant du système de build optimisé et de l'orchestration des tâches de Nx. Nx peut être configuré comme un runner de tâches pour Lerna, fournissant des builds incrémentiels et une mise en cache des calculs pour les packages gérés par Lerna.

Meilleures Pratiques pour la Gestion des Monorepos Frontend

Que vous choisissiez Lerna ou Nx, le respect des meilleures pratiques est crucial pour gérer avec succès un monorepo frontend :

• Établir une Structure de Projet Claire : Organisez vos projets de manière logique et cohérente. Utilisez une convention de nommage claire pour les packages et les bibliothèques.
• Appliquer des Normes de Codage Cohérentes : Utilisez des linters et des formateurs pour garantir un style de code cohérent dans tous les projets. Des outils comme ESLint et Prettier peuvent être intégrés à votre flux de travail.
• Automatiser les Processus de Build et de Test : Utilisez des pipelines CI/CD pour automatiser les processus de build, de test et de déploiement. Des outils comme Jenkins, CircleCI et GitHub Actions peuvent être utilisés.
• Implémenter des Revues de Code : Effectuez des revues de code approfondies pour garantir la qualité et la maintenabilité du code. Utilisez des pull requests et des outils de revue de code.
• Surveiller les Temps de Build et les Performances : Suivez les temps de build et les métriques de performance pour identifier les goulots d'étranglement et les domaines à améliorer. Nx fournit des outils pour analyser les performances de build.
• Documenter la Structure et les Processus de Votre Monorepo : Créez une documentation claire expliquant la structure de votre monorepo, les outils et technologies utilisés, ainsi que les flux de développement.
• Adopter les Commits Conventionnels : Utilisez les commits conventionnels pour automatiser les processus de versioning et de publication. Lerna prend en charge les commits conventionnels dès la sortie de la boîte.

Conclusion

Les monorepos frontend offrent des avantages significatifs pour la gestion de projets vastes et complexes, notamment le partage de code, la gestion simplifiée des dépendances et une collaboration améliorée. Lerna et Nx sont des outils puissants qui peuvent vous aider à gérer efficacement un monorepo frontend. Lerna est un excellent choix pour gérer les packages npm, tandis que Nx fournit un système de build plus complet avec des fonctionnalités avancées comme les builds incrémentiels et la génération de code. En considérant attentivement les besoins de votre projet et en suivant les meilleures pratiques, vous pouvez adopter avec succès un monorepo frontend et en récolter les bénéfices.

N'oubliez pas de prendre en compte des facteurs tels que l'expérience de votre équipe, la complexité du projet et les exigences de performance lors du choix entre Lerna et Nx. Expérimentez avec les deux outils et trouvez celui qui correspond le mieux à vos besoins spécifiques.

Bonne chance dans votre parcours monorepo !